<template>
  <div id="productDetail">
    <Head />
    <div class="content">
      <div class="title">
        <div class="title_content">
          <!-- 商家信息 -->
          <div class="picture">
            <el-image
              style="width: 56; height: 56px; border-radius: 56px"
              :src="responseProduct.imgSrc"
            ></el-image>
          </div>
          <div class="product_name">{{ responseProduct.shopName }}</div>
          <div class="button_1">联系客服</div>
          <div class="button_2">进入店铺</div>
        </div>
      </div>

      <div class="main">
        <div class="main_center">
          <div
            class="img"
            :style="{ backgroundImage: 'url(' + responseProduct.imgSrc + ')' }"
          ></div>
          <div class="main_content">
            <div class="product_detail">
              <div class="product_name">
                {{ responseProduct.title }}
              </div>
              <div class="already_sold">
                <span>已售：{{ responseProduct.stockQuantity }}</span>
              </div>

              <div class="price">
                <i
                  class="iconfont icon-qian"
                  style="font-size: 14px; margin-right: 2px; font-weight: bold"
                ></i
                >{{ responseProduct.price }}
              </div>

              <el-popover placement="bottom" width="400" trigger="click">
                <div class="container" style="width: 410px">
                  <div
                    class="title_address"
                    style="
                      font-size: 14px;
                      font-weight: bold;
                      color: black;
                      margin-bottom: 5px;
                    "
                  >
                    从我的地址中选择
                  </div>
                  <div
                    class="content"
                    v-for="item in responseAddress"
                    :key="item.id"
                    style="
                      width: 183px;
                      height: 80px;
                      font-size: 12px;
                      float: left;
                      margin-right: 10px;
                      border-radius: 5px;
                      cursor: default;
                      border: 2px solid #ccc;
                    "
                    @click="chooseAddress(item)"
                  >
                    {{
                      "详细地址:" +
                      item.adDetail +
                      "\n姓名:" +
                      item.name +
                      "\n电话:" +
                      item.number
                    }}
                  </div>
                </div>
                <div class="address" slot="reference">
                  <span>配送：</span>
                  <span
                    style="margin-left: 40px"
                    @click="showAddress"
                    slot="reference"
                    >{{ adressFrom }}<i class="el-icon-arrow-down"></i
                  ></span>
                  <p>快递免费 预计24小时内发货</p>
                </div>
              </el-popover>

              <div class="count">
                <span>数量：</span>
                <el-input-number
                  v-model="num"
                  :min="1"
                  :max="10"
                  :step="1"
                ></el-input-number>
              </div>
              <!-- Form -->
              <el-dialog
                title="收货地址"
                :visible.sync="dialogFormVisible"
              >
                <el-form :model="form">
                  <el-form-item label="* 所在地址" :label-width="formLabelWidth">
                    <el-cascader
                      size="large"
                      :options="pcaTextArr"
                      v-model="form.selectedOptions"
                      @change="handleSelectionChange"
                    >
                    </el-cascader>
                  </el-form-item>
                  <el-form-item label="* 收货人" :label-width="formLabelWidth">
                    <el-input v-model="form.name"></el-input>
                  </el-form-item>
                  <el-form-item label="* 详细地址" :label-width="formLabelWidth">
                    <el-input v-model="form.adDetail"></el-input>
                  </el-form-item>
                  <el-form-item label="* 手机号码" :label-width="formLabelWidth">
                    <el-input v-model="form.number"></el-input>
                  </el-form-item>
                  <el-form-item label="固定号码" :label-width="formLabelWidth">
                    <el-input v-model="form.numberFixed"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱地址" :label-width="formLabelWidth">
                    <el-input v-model="form.email"></el-input>
                  </el-form-item>
                  <el-form-item label="地址别名" :label-width="formLabelWidth">
                    <el-input v-model="form.addressAlias"></el-input>
                     <!-- 地址别名 如家里、公司 -->
                     <span class="other" @click="selectAlias('公司')">公司</span>
                     <span class="other" @click="selectAlias('学校')">学校</span>
                     <span class="other" @click="selectAlias('家')">家</span>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false"
                    >取 消</el-button
                  >
                  <el-button type="primary" @click="addAddressList"
                  
                    >确 定</el-button
                  >
                </div>
              </el-dialog>
              <div class="cart">
                <el-button
                  type="primary"
                  style="width: 100px; height: 40px; margin-top: 30px"
                  @click="addCart"
                  >加入购物车</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
    
<script>
import { pcaTextArr } from "element-china-area-data";
import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  codeToText,
} from "element-china-area-data";

import Head from "@/components/head.vue";
export default {
  name: "productDetail",
  components: {
    Head,
  },
  data() {
    return {
      num: 1,
      isShowAdress: false,
      responseProduct: [],
      responseAddress: [],
      adressFrom: "从我的地址中选择",
      addressId: "",
      dialogFormVisible: false,
      pcaTextArr,

      data: "",
      form: {
        name: "",
        number: "",
        numberFixed: "",
        email: "",
        addressAlias: "",
        userId: localStorage.getItem("id"),
        adDetail: "",
        selectedOptions: [],
      },
      formLabelWidth: "80px",
    };
  },
  methods: {
    // 展示地址
    showAddress() {
      this.isShowAdress = !this.isShowAdress;
    },

    // 添加购物车
    addCart() {
      // 检查有没有地址
      let url = "/api/address/list/" + localStorage.getItem("id");
      this.$http.get(url).then((res) => {
        if (res.data.data.length == 0) {
          this.dialogFormVisible = true;
          return;
        }
        if (this.addressId == "") {
          this.$message({
            message: "请选择地址",
            type: "warning",
          });
          return;
        } else {
          let carturl = "/api/cart/add";
          let data = {
            title: this.responseProduct.title,
            price: this.responseProduct.price,
            imgSrc: this.responseProduct.imgSrc,
            shopName: this.responseProduct.shopName,
            count: this.num,
            productId: this.$route.query.productId,
            userId: localStorage.getItem("id"),
            addressId: this.addressId,
          };
          this.$http.post(carturl, data).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              // 跳转到我的购物车界面
              this.$router.push("/mycart");
            } else {
              this.$message({
                message: "添加失败",
                type: "error",
              });
            }
          });
        }
      });
    },

    // 根据id获取商品详情
    getProductDetail() {
      // 获取商品的id
      const id = this.$route.query.productId;
      let url = "/api/product/" + id;
      this.$http.get(url).then((res) => {
        this.responseProduct = res.data;
      });
    },

    // 获取地址列表
    getAddressList() {
      let url = "/api/address/list/" + localStorage.getItem("id");
      this.$http.get(url).then((res) => {
        this.responseAddress = res.data.data;
        console.log(res.data.data);
      });
    },

    // 选择地址
    chooseAddress(item) {
      this.adressFrom = item.adDetail;
      this.addressId = item.id;
      console.log(this.addressId);
    },

    // 选择别名
    handleSelectionChange() {
      // 访问选择的值
      this.data =
        this.form.selectedOptions[0] +
        this.form.selectedOptions[1] +
        this.form.selectedOptions[2];
      console.log(this.data);
    },

    // 选择别名
    selectAlias(alias) {
      this.form.addressAlias = alias;
    },

    // 添加地址
    addAddressList(){
      this.dialogFormVisible = false;
      let url = "/api/address/add";
      this.form.adDetail = this.data + this.form.adDetail;
      this.$http.post(url, this.form).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.getAddressList();
        } else {
          this.$message({
            message: "添加失败",
            type: "error",
          });
        }
      });
    }
  },
  mounted() {
    this.getProductDetail();
    this.getAddressList();
  },
};
</script>
    
    
    
    
    
<style lang="less" scoped>
#productDetail {
  width: 100%;
  height: 100%;

  .content {
    width: 1200px;
    height: 500px;
    margin: auto;

    .title {
      width: 100%;
      text-align: left;
      height: 80px;
      padding-top: 2px;
      padding-left: 5px;
      padding-right: 5px;
      font-size: 16px;
      border-radius: 95px;
      background-color: #fff;

      .title_content {
        height: 56px;
        margin: 12px;
        text-align: center;
        font-size: 20px;
        font-weight: bold;

        .picture {
          width: 56px;
          height: 56px;
          float: left;
          margin-right: 5px;
        }

        .product_name {
          width: 800px;
          height: 56px;
          float: left;
          margin-right: 70px;
          text-align: left;
          margin-top: 5px;
          margin-left: 10px;
        }

        .button_1 {
          width: 80px;
          height: 40px;
          float: left;
          font-size: 16px;
          background-color: #fff;
          border: 1px solid #000;
          border-radius: 5px;
          margin-top: 10px;
          margin-left: 40px;
          line-height: 40px;
          text-align: center;
          cursor: default;
        }

        .button_2 {
          width: 80px;
          height: 40px;
          float: left;
          font-size: 16px;
          background-color: #fff;
          border: 1px solid #000;
          border-radius: 5px;
          margin-top: 10px;
          margin-left: 20px;
          line-height: 40px;
          text-align: center;
          cursor: default;
        }
      }
    }

    .main {
      width: 100%;
      height: 700px;
      margin-top: 10px;
      border-radius: 15px;
      background-color: #fff;
      padding: 10px;

      .main_center {
        width: 100%;
        height: 700px;
        margin: auto;
      }

      .img {
        width: 450px;
        height: 450px;
        float: left;
        border-radius: 15px;
        // background: url("../../assets//images/background.png");
      }
      .main_content {
        width: 730px;
        height: 700px;
        float: left;
        margin-left: 20px;

        .product_detail {
          width: 100%;
          height: 700px;
          border-radius: 15px;
          background-color: #fff;

          .product_name {
            width: 100%;
            height: 50px;
            font-size: 20px;
            font-weight: bold;
            color: #000;
          }

          .already_sold {
            width: 100%;
            font-size: 16px;
            margin-top: 10px;
            color: #686767;
          }

          .price {
            width: 100%;
            height: 50px;
            font-size: 20px;
            font-weight: bold;
            color: #ff4401;
            margin-top: 35px;
          }

          /deep/ .content :hover {
            border: 1px solid #ff4401 !important  ;
          }
          .address {
            width: 100%;
            height: 50px;
            font-size: 16px;
            color: #686767;
            margin-top: 10px;
            cursor: default;

            span {
              font-size: 16px;
              color: #686767;
            }

            p {
              font-size: 14px;
              color: #ff4401;
            }
          }

          .other {
            width: 50px;
            height: 30px;
            border-radius: 5px;
            font-size: 14px;
            color: #fff;
            background-color: #cccccc;
            margin-left: 10px;
            cursor: pointer;
          }
          .showAdress {
            width: 100%;
            height: 50px;
            font-size: 16px;
            color: #686767;
            margin-top: 10px;
            cursor: pointer;

            span {
              font-size: 16px;
              color: #686767;
            }
          }

          .count {
            width: 100%;
            height: 50px;
            font-size: 16px;
            color: #686767;
            margin-top: 30px;

            span {
              font-size: 16px;
              color: #686767;
            }
          }

          /deep/ .el-dialog {
            width: 35%;
          }

          .cart {
            width: 100%;
            height: 50px;
            margin-top: 10px;

            .el-button {
              width: 120px;
              height: 40px;
              font-size: 14px;
              background-color: #ff4401;
              border-radius: 5px;
              color: #fff;
              cursor: pointer;

              span {
                text-align: center;
                line-height: 40px;
              }
            }
          }
        }
      }
    }
  }
}
</style>